.heading-link {
  // We hide the actual '#' contents of this in favor of a smaller visible
  // target (created with ::after below).
  color: transparent;
  float: left;
  margin-left: get-size(400) * -1;
  opacity: 0.4;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: get-size(400);

  &:hover {
    opacity: 1;
  }

  &::after {
    bottom: 0;
    color: var(--color-secondary-text);
    content: '#';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0.666);
    transform-origin: 75% 50%;

    @include media-query('lg') {
      // On large screens, move farther from the heading (more to the left).
      // (Don't do this on small screens as it's too close to the page edge).
      transform-origin: 25% 50%;
    }
  }
}
